<template>
  <div class="baseDesign-container">
    <FlowHeader :submit="submitDat" @routHandle="routHandle" />

  </div>
</template>

<script>
import FlowHeader from '@/components/FlowHeader'
import { mapGetters } from 'vuex'
import Cascader from '@/components/Cascader'
import { baseURL } from '@/utils/request'

export default {
  name: 'Dashboard',
  components: {
    FlowHeader,
    Cascader
  },
  data() {
    return {
      checked: true,
      value: '',
      imageUrl: '',
      dialogVisible: false,
      isLodding: false,
      isMak: true,
      groupList: [],
      baseFrom: {
        name: '',
        allowUserJson: [],
        description: '',
        groupType: '1',
        icon: '',
        opinionPrompt: '',
        opinionRequired: '1'
      },
      baseURL,
      headers: {
        Authorization: this.$store.getters.token || ''
      },
      fileList: [],
      logoUrl: ''
    }
  },
  computed: {
    ...mapGetters([
      'flowId',
      'baseData',
      'tableData',
      'flowData'
    ])
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      if (this.flowId) {
        await this.$store.dispatch('approval/getFlowInfoAct', { id: this.flowId }).then((res) => {
          this.$store.dispatch('approval/setflowdata', { ...res })
          this.$store.dispatch('approval/setflowid', '')
          this.baseFrom = res.baseData
          res.baseData.allowUserJson ? this.baseFrom.allowUserJson = res.baseData.allowUserJson : null
          this.baseFrom.opinionRequired = res.opinionRequired === '1'
          this.isLodding = true
          this.loading = false
        }).catch(() => {
          this.$message.error('数据请求失败！请稍后重试')
          this.isLodding = true
          this.loading = false
        })
      } else {
        if (!this.baseData || this.baseData.length === 0) {
          this.baseFrom = {
            name: '',
            allowUserJson: [],
            description: '',
            groupType: '1',
            icon: '',
            opinionPrompt: '',
            opinionRequired: '1'
          }
        } else {
          this.baseFrom = this.baseData
        }
        this.isLodding = true
      }
    },
    routHandle(url) {
      if (this.verificationHandle()) {
        this.$store.dispatch('approval/setflowdata', { baseData: this.baseFrom })
        this.$router.push(url)
      }
    },
    getValue(val) {
      this.baseFrom.allowUserJson = val.map(n => {
        return { objectId: n.id, objectType: n.type }
      })
    },
    isMakHand(val) {
      this.isMak = val
    },
    // 提交数据验证
    verificationHandle() {
      if (this.baseFrom.name.length >= 2) {
        return true
      } else {
        this.$message.error('请输入审批名称！')
        return false
      }
    },

    async submitDat() {
      if (this.verificationHandle()) {
        const tableData = []
        this.phDataes.forEach(n => {
          tableData.push({ ...n, title: n.data.title, data: JSON.stringify(n.data) })
        })
        const pramas = { baseData: this.baseData, tableData, flowData: this.flowData }
        this.baseFrom.opinionRequired = this.isMak ? '1' : 0
        await this.$store.dispatch('approval/setflowdata', { baseData: this.baseFrom })
        await this.$store.dispatch('approval/setflowst', '')
        await this.$store.dispatch('approval/addFlowInfoAct', { ...pramas })
        this.$message.success('数据修改成功！')
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.baseFrom.icon = res.data
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }
}
</script>
<style>
  .baseDesign-container .el-input--mini .el-input__inner,.el-textarea__inner{
    width: 300px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    background: #fff;
    color: #c8c9d5;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
<style lang="scss" >
  .baseDesign {
    &-container {
      .content{
        width: 800px;
        margin: 30px auto;
        margin-top: 90px;
        line-height: 2;
        .formItem{
          display: flex;
          margin: 30px 0;
          .tit{
            display: inline-block;
            text-align: right;
            width: 300px;
            color: #666666;
          }
          .contInput{
            flex: 1;
          }
        }
      }
    }
  }
</style>
